<!-- 指标值设置组件 -->
<template>
  <div>
    <Form :rules="ruleValidate" ref="form" :label-width="100">
      <Row :gutter="32" class="code-row-bg">
        <Col span="24">
          <Form-item :label="'字段类型'" prop="fieldType">
            <Select size="default" placeholder="请选择字段类型" transfer v-model="formDesc.type">
              <Option v-for="item in FIELD_OPTIONS" :label="item.label" :value="item.value" :key="item.value">{{
                item.label
              }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" prop="fieldType" class="code-row-bg">
        <Col span="16">
          <Form-item label="最大长度" :label-width="150" v-if="formDesc.type === FIELD_TYPE['TEXT']">
            <div slot="label" style="display: inline-flex;">
              <div>最大长度</div>
              <Tooltip transfer max-width="800" content="计数方式：word文档“字符数(计空格）”" placement="right" slot>
                <Icon type="ios-help-circle-outline" />
              </Tooltip>
            </div>
            <InputNumber
              style="width: 100%;"
              v-model="formDesc.attrs.maxlength"
              placeholder="请输入"
              :max="50"
              :min="0"
              :step="1"
              :precision="0"
              :active-change="false"
            ></InputNumber>
          </Form-item>
          <Form-item label="最大长度" :label-width="150" v-if="formDesc.type === FIELD_TYPE['TEXTAREA']">
            <div slot="label" style="display: inline-flex;">
              <div>最大长度</div>
              <Tooltip transfer max-width="800" content="计数方式：word文档“字符数(计空格）”" placement="right" slot>
                <Icon type="ios-help-circle-outline" />
              </Tooltip>
            </div>
            <InputNumber
              style="width: 100%;"
              v-model="formDesc.attrs.maxlength"
              placeholder="请输入"
              :max="30000"
              :min="51"
              :step="1"
              :precision="0"
              :active-change="false"
            ></InputNumber>
          </Form-item>
          <Form-item label="格式" :label-width="150" v-if="formDesc.type === FIELD_TYPE['NUMBER']">
            <Select style="width: 100%" transfer placeholder="请选择" v-model="formDesc.numberType">
              <Option v-for="item in formatList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Form-item
        v-if="
          formDesc.type === FIELD_TYPE['RADIO'] ||
            formDesc.type === FIELD_TYPE['CHECKBOX'] ||
            formDesc.type === FIELD_TYPE['SELECT']
        "
        label=""
        :label-width="150"
      >
        <radioItem
          ref="radioItem"
          :fieldType="formDesc.type"
          :optionsList="formDesc.options"
          :selection="formDesc.selectedOption"
        ></radioItem>
      </Form-item>
      <Form-item label="" :label-width="150" v-if="formDesc.type === FIELD_TYPE['IMG']">
        <el-upload action="/" list-type="picture-card">
          <i class="el-icon-plus"></i>
        </el-upload>
      </Form-item>
      <Form-item label="时间格式" :label-width="150" v-if="formDesc.type === FIELD_TYPE['DATE']">
        <RadioGroup v-model="formDesc.dateType" size="default">
          <Radio v-for="item in TIME_OPTIONS" :label="item.value" :key="item.value">{{ item.label }}</Radio>
        </RadioGroup>
      </Form-item>
      <Form-item label="附件格式" :label-width="150" v-if="formDesc.type === FIELD_TYPE['FILE']">
        <CheckboxGroup v-model="formDesc.fileTypeArr" size="default" @on-change="onChange">
          <Checkbox v-for="item in FILE_OPTIONS" :label="item.value" :key="item.value">{{ item.label }}</Checkbox>
        </CheckboxGroup>
      </Form-item>
      <Form-item label="编辑公式" :label-width="150" v-if="formDesc.type === FIELD_TYPE['FORMULA']">
        <Input v-model="formDesc.formula" placeholder="点击编辑公式"></Input>
      </Form-item>
      <Form-item label="" :label-width="130" v-if="formDesc.type === FIELD_TYPE['TABLE']">
        <TableCreator ref="tableCreator" :table-desc="formDesc.tableDesc"></TableCreator>
      </Form-item>
      <Form-item label="选择数据" :label-width="150" v-if="formDesc.type === FIELD_TYPE['SIN_REFERENCE']">
        <Input v-model="formDesc.referenceData" placeholder="点击选择数据"></Input>
      </Form-item>
      <Row :gutter="32" class="code-row-bg">
        <Col span="24">
          <Form-item :label="'是否必填'" prop="control">
            <RadioGroup v-model="control">
              <Radio :label="1">必填</Radio>
              <Radio :label="0">非必填</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import radioItem from '../../../components/Radio.vue'
import TableCreator from '../../../components/Table/TableCreator.vue'
import { FIELD_TYPE, FIELD_OPTIONS } from '../../../const/applyForm/targetSet'
import { FILE_OPTIONS, TIME_OPTIONS } from '../../../const/applyForm/fieldItem'
export default {
  name: 'setTargetVal',
  components: {
    radioItem,
    TableCreator
  },
  data() {
    return {
      FIELD_OPTIONS: FIELD_OPTIONS,
      FILE_OPTIONS: FILE_OPTIONS,
      TIME_OPTIONS: TIME_OPTIONS,
      FIELD_TYPE: FIELD_TYPE,
      fieldOptions: FIELD_OPTIONS,
      formatList: [
        { label: '整数', value: 0 },
        { label: '保留1位小数', value: 1 },
        { label: '保留2位小数', value: 2 },
        { label: '百分比', value: 3 }
      ],
      formDesc: {
        type: 0,
        numberType: 0,
        attrs: {
          maxlength: 50
        },
        fileTypeArr: [1],
        dateType: 1,
        options: [],
        selectedOption: 1, // 下拉框字段的单选多选
        formula: '', // 公式
        referenceData: '', // 引用数据
        tableDesc: {} // 表格字段的列
      },
      control: 1,
      ruleValidate: {
        formula: [{ required: true, message: '请填写公式', trigger: 'trigger' }],
        selectedData: [{ required: true, message: '请选择数据', trigger: 'trigger' }],
        fieldType: [{ required: true, message: '请选择字段类型', trigger: 'trigger' }],
        control: [{ required: true, message: '请选择是否必填', trigger: 'trigger' }]
      },
      lastFileType: []
    }
  },
  props: {
    attributes: {
      type: Object,
      default: () => {}
    }
  },

  methods: {
    changeOrigin() {},
    changeField() {},
    onChange(value) {
      const NO_LIMIT = 7
      if (this.lastFileType.includes(NO_LIMIT)) {
        //上一次选中了不限制
        if (value.includes(NO_LIMIT)) {
          this.formDesc.fileTypeArr = value.filter(item => item !== NO_LIMIT)
          this.lastFileType = JSON.parse(JSON.stringify(this.formDesc.fileTypeArr))
        } else {
          this.lastFileType = JSON.parse(JSON.stringify(value))
        }
      } else {
        //上一次限制
        if (value.includes(NO_LIMIT)) {
          this.formDesc.fileTypeArr = [NO_LIMIT]
        }
        this.lastFileType = JSON.parse(JSON.stringify(value))
      }
    },
    setPageActions() {
      this.$emit('SetPageActions', [
        {
          text: '确定',
          theme: 'primary',
          handle: () => {
            if (
              this.formDesc.type === FIELD_TYPE['RADIO'] ||
              this.formDesc.type === FIELD_TYPE['CHECKBOX'] ||
              this.formDesc.type === FIELD_TYPE['SELECT']
            ) {
              this.formDesc.options = this.$refs.radioItem.options
            }
            if (this.formDesc.type === FIELD_TYPE['SELECT']) {
              this.formDesc.selectedOption = this.$refs.radioItem.selectedOption
            }
            if (this.formDesc.type === FIELD_TYPE['TABLE']) {
              if (
                Object.keys(this.$refs.tableCreator.tableAttrs).length === 0 &&
                (!this.$refs.tableCreator.tableDesc ||
                  !this.$refs.tableCreator.tableDesc.attrs ||
                  Object.keys(this.$refs.tableCreator.tableDesc.attrs).length === 0)
              ) {
                return this.$Message.error({
                  content: '请先进入表格设计器中进行设计',
                  duration: 3
                })
              }
              this.formDesc.tableDesc =
                Object.keys(this.$refs.tableCreator.tableAttrs).length === 0
                  ? this.$refs.tableCreator.tableDesc
                  : this.$refs.tableCreator.tableAttrs
            }
            const obj = { ...this.formDesc, control: this.control }
            this.$emit('Close', obj)
          }
        },
        {
          text: '取消',
          handle: () => {
            this.$emit('Close')
          }
        }
      ])
    }
  },
  watch: {
    'formDesc.type': {
      handler(newVal) {
        if (newVal === FIELD_TYPE['TEXT'] && this.formDesc.attrs.maxlength > 50) {
          this.formDesc.attrs.maxlength = 50
        } else if (newVal === FIELD_TYPE['TEXTAREA'] && this.formDesc.attrs.maxlength < 51) {
          this.formDesc.attrs.maxlength = 51
        }
      },
      immediate: true
    }
  },
  created() {
    this.$emit('SetTitle', '指标值设置')
    this.$emit('SetPageMinHeight', 200)
    this.setPageActions()
    if (this.attributes && Object.keys(this.attributes).length) {
      const { control, ...formDesc } = this.attributes
      this.control = control
      this.formDesc = formDesc
      if (this.attributes.fileTypeArr) {
        this.lastFileType = this.attributes.fileTypeArr
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
